// 封装权限路由的模块
import { asyncRoute, constantRoutes } from '@/router/index'

const state = {
  routes: [] // 声明变量 保存筛选出来的权限路由数据
}
// 同步修改state变量的唯一方法
const mutations = {
  setRoutes(state, routes) {
    // state.routes = routes
    // 把静态路由对象和动态路由对象拼接在一起，用于渲染侧边栏导航
    state.routes = [...constantRoutes, ...routes]
  }
}
// 异步更改state数据的方法（讲解更新-- 通过mutations）
const actions = {
  // 筛选动态路由
  filterRoutes(store, menus) {
    // 实现筛选逻辑
    // console.log(16, menus)
    // * 我们需要通过动态路由数组和menus数组进行匹配筛选出具有访问权限的动态路由数据
    //  * 如何匹配呢？
    //  * 答：我们可以为每一个动态路由添加一个name属性，这个属性的就是我们添加的页面访问权限
    //  * 对应的标识符，
    //  * 我们只需要判断到动态路由中的name属性的值存在在menus数组中即可说明 该路由是具有访问
    //  * 权限的路由
    const routes = asyncRoute.filter(item => {
      // indexOf方法用于查找数组中是否存在某个元素，如果找到返回下标值，找不到返回-1
      return menus.indexOf(item.name) !== -1
    })
    // console.log('筛选出来具有访问权限的动态路由', routes)
    store.commit('setRoutes', routes)
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
